<!DOCTYPE html>
<html>
<head>
    <title>bPage入门指南</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../lib/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../lib/font-awesome-4/css/font-awesome.min.css" />
    
    <link rel="stylesheet" href="../lib/syntaxhighlighter/styles/shCore.css" type="text/css">
	<link rel="stylesheet" href="../lib/syntaxhighlighter/styles/shThemeDefault.css" type="text/css">
    
    <link rel="stylesheet" href="../css/bpage/header.css" />
    <link rel="stylesheet" href="../css/bpage/docs.css" />
</head>

<body>
    <header class="navbar navbar-static-top" id="top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="https://terryz.github.io/bpage/index.html" class="navbar-brand">bPage</a>
        </div>
        <nav id="bs-navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="javascript:void(0);" >入门</a>
                </li>
                <li>
                    <a href="demo.html" >实例</a>
                </li>
                <li>
                    <a href="docs.html" >文档</a>
                </li>
                <li>
                    <a href="changelog.html" >更新记录</a>
                </li>
                <li>
                    <a href="message.html" >留言/反馈</a>
                </li>
                <li>
                    <a href="https://terryz.github.io" >主页</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="https://github.com/TerryZ/bPage" target="_blank"><i class="fa fa-lg fa-github"></i> Fork on Github</a></li>
            </ul>
        </nav>
    </div>
    </header>

	<div class="content">
	<div class="container">
		<h1 class="text-center">入门指南</h1>

		<h3>资源导入 <small>在网页上引用css样式、js脚本等文件</small></h3>
<script type="syntaxhighlighter" class="brush:html">
<![CDATA[
<!-- 插件使用的样式表文件，分bootstrap2和bootstrap3两个环境使用，根据使用环境引用 -->
<!-- bootstrap2环境使用 -->
<link rel="stylesheet" href="b.page.css" type="text/css">
<!-- bootstrap3环境使用 -->
<link rel="stylesheet" href="b.page.bootstrap3.css" type="text/css">


<!-- 插件核心脚本 -->
<script type="text/javascript" src="b.page.js" >< /script>
]]>
</script>

		<h3>HTML代码</h3>
<script type="syntaxhighlighter" class="brush:html">
<![CDATA[
<!-- 页面跳转模式为例 -->
<!-- 前提条件为服务端已将分页数据设置到request中 -->
<!-- 设置表格，内容区域中使用服务端的el表达式循环生成表格内容 -->
<table class="bTable table table-striped table-bordered table-hover table-condensed">
	<thead>
		<tr>
			<th class="selectColumn" >选择</th>
			<th>登录名</th>
			<th>姓名</th>
			<th>性别</th>
			<th>出生年月</th>
			<th>电话</th>
			<th>电子邮箱</th>
			<th>状态</th>
			<th>更新时间</th>
		</tr>
	</thead>
	<tbody>
		<c:if test="${userList.list != null}">
			<c:forEach var="d" items="${userList.list}">
		<tr class="<c:if test="${d.status == 0}">error</c:if>" id="${d.id}">
			<td class="selectColumn"><input type="radio" name="userSelect" value="${d.id}" /></td>
			<td>${d.login_name}</td>
			<td>${d.name}</td>
			<td>${d.sexName}</td>
			<td><fmt:formatDate pattern="yyyy-MM-dd" value="${d.birthday}" type="date" /></td>
			<td>${d.phone1}</td>
			<td>${d.email}</td>
			<td>${d.statusName}</td>
			<td><fmt:formatDate pattern="yyyy-MM-dd" value="${d.update_time}" type="date" /></td>
		</tr>
			</c:forEach>
		</c:if>
	</tbody>
</table>
<!-- 必须设置以下分页信息设置，否则插件将无法读取分页数据-->
<!-- 隐藏内容设置后，在插件初始化时进行读取-->
<c:if test="${userList != null}">
<input type="hidden" id="pageNumber" value="${userList.pageNumber}">
<input type="hidden" id="pageSize" value="${userList.pageSize}">
<input type="hidden" id="totalPage" value="${userList.totalPage}">
<input type="hidden" id="totalRow" value="${userList.totalRow}">
</c:if>
]]>
</script>

		<h3>Javascript初始化插件代码</h3>
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//初始化插件
$('#page1').bPage({
	//分页目标链接
    url : $webroot + 'demo/manage/page',
	//读取页面设置的分页参数
    totalPage : $('#totalPage').val(),
    totalRow : $('#totalRow').val(),
    pageSize : $('#pageSize').val(),
    pageNumber : $('#pageNumber').val(),
	//自定义传递到服务端的参数
    params : function(){
        return {
            userName : 'zhangsan',
            age : 42
        };
    }
});
]]>
</script>






<div id="disqus_thread"></div>
<script>

/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://https-terryz-github-io.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>


	</div>
	</div>

    <footer class="footer">
        <div class="container">
        Copyright © 2016-2017 Terry Zeng
        </div>
    </footer>







<script type="text/javascript" src="../lib/jquery.min.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shCore.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushXml.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushJScript.js" ></script>
<script type="text/javascript">
$(function(){
	SyntaxHighlighter.all();
});
</script>
<script type="text/javascript" src="../js/count.js" ></script>
</body>
</html>